<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Custom Toolbar Example - OverType</title>
  <style>
    body {
      font-family: system-ui, -apple-system, sans-serif;
      max-width: 900px;
      margin: 40px auto;
      padding: 0 20px;
    }
    h1 {
      margin-bottom: 10px;
    }
    .description {
      color: #666;
      margin-bottom: 30px;
    }
    .example-section {
      margin-bottom: 40px;
    }
    .example-section h2 {
      font-size: 18px;
      margin-bottom: 10px;
    }
  </style>
</head>
<body>
  <h1>Custom Toolbar Examples</h1>
  <p class="description">
    Demonstrates the new toolbarButtons API with custom buttons, separators, and mixed configurations.
  </p>

  <div class="example-section">
    <h2>Example 1: Default Toolbar</h2>
    <p>Using the default toolbar with all built-in buttons and separators.</p>
    <div id="editor1"></div>
  </div>

  <div class="example-section">
    <h2>Example 2: Custom Save Button</h2>
    <p>Default toolbar with a custom "Save" button at the start.</p>
    <div id="editor2"></div>
  </div>

  <div class="example-section">
    <h2>Example 3: Minimal Toolbar</h2>
    <p>Only essential formatting buttons.</p>
    <div id="editor3"></div>
  </div>

  <div class="example-section">
    <h2>Example 4: Custom Button with Dynamic State</h2>
    <p>Export button that's only enabled when there's content.</p>
    <div id="editor4"></div>
  </div>

  <script type="module">
    import OverType, { toolbarButtons } from '../dist/overtype.esm.js';

    // Example 1: Default toolbar
    new OverType('#editor1', {
      value: '# Default Toolbar\n\nAll built-in buttons with separators.',
      toolbar: true,
      autoResize: true,
      minHeight: '150px'
    });

    // Example 2: Custom save button
    new OverType('#editor2', {
      value: '# Custom Save Button\n\nClick the save button to store in localStorage.',
      toolbar: true,
      toolbarButtons: [
        {
          name: 'save',
          icon: '<svg viewBox="0 0 18 18"><path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" d="M14,16H4a1,1,0,0,1-1-1V3A1,1,0,0,1,4,2h7.5L15,5.5V15A1,1,0,0,1,14,16Z"></path><polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="12 16 12 10 6 10 6 16"></polyline><polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="6 2 6 6 11 6"></polyline></svg>',
          title: 'Save to localStorage',
          action: ({ editor, getValue }) => {
            const content = getValue();
            localStorage.setItem('overtype-demo', content);
            alert('Saved to localStorage!');
          }
        },
        toolbarButtons.separator,
        toolbarButtons.bold,
        toolbarButtons.italic,
        toolbarButtons.code,
        toolbarButtons.separator,
        toolbarButtons.link,
        toolbarButtons.separator,
        toolbarButtons.h1,
        toolbarButtons.h2,
        toolbarButtons.separator,
        toolbarButtons.bulletList,
        toolbarButtons.orderedList,
        toolbarButtons.separator,
        toolbarButtons.viewMode
      ],
      autoResize: true,
      minHeight: '150px'
    });

    // Example 3: Minimal toolbar
    new OverType('#editor3', {
      value: '# Minimal Toolbar\n\nOnly **bold**, *italic*, and `code`.',
      toolbar: true,
      toolbarButtons: [
        toolbarButtons.bold,
        toolbarButtons.italic,
        toolbarButtons.code,
        toolbarButtons.separator,
        toolbarButtons.link,
        toolbarButtons.separator,
        toolbarButtons.viewMode
      ],
      autoResize: true,
      minHeight: '150px'
    });

    // Example 4: Dynamic state button
    const editor4 = new OverType('#editor4', {
      value: '',
      toolbar: true,
      toolbarButtons: [
        {
          name: 'export',
          icon: '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><path d="M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4"/><polyline points="7 10 12 15 17 10"/><line x1="12" y1="15" x2="12" y2="3"/></svg>',
          title: 'Export (only enabled with content)',
          action: ({ editor, getValue }) => {
            const content = getValue();
            if (!content.trim()) return;

            const blob = new Blob([content], { type: 'text/markdown' });
            const url = URL.createObjectURL(blob);
            const a = document.createElement('a');
            a.href = url;
            a.download = 'document.md';
            a.click();
            URL.revokeObjectURL(url);
          }
        },
        toolbarButtons.separator,
        toolbarButtons.bold,
        toolbarButtons.italic,
        toolbarButtons.separator,
        toolbarButtons.h1,
        toolbarButtons.h2,
        toolbarButtons.separator,
        toolbarButtons.bulletList,
        toolbarButtons.separator,
        toolbarButtons.viewMode
      ],
      autoResize: true,
      minHeight: '150px',
      onChange: (content, editor) => {
        // Update export button state
        const exportButton = editor.toolbar.buttons.export;
        if (exportButton) {
          const hasContent = content.trim().length > 0;
          exportButton.disabled = !hasContent;
          exportButton.style.opacity = hasContent ? '1' : '0.5';
        }
      }
    });
  </script>
</body>
</html>
